<template>
  <div class="plan">
    <div class="planTop">
      <img src="@/assets/img/cj.webp" alt="">
      <div class="kv-text">
        <h1>华为全屋智能 2.0</h1>
        <span>住 进 未 来 家</span>
        <p>全新空间交互体验 2.0 ｜ 全新后装解决方案</p>
      </div>
      <div class="kv-sub">
          广告 | 图片仅供参考，请以实物
          <span class="nowrap">为准</span><br/>
          *华为全屋智能需配合鸿蒙生态智能家居支持 Wi-Fi 6+
          的设备使用
      </div>
    </div>
    <div class="planTwo">
      <div class="gap"></div>
      <div class="pltwo_one">
        <div>华为全屋智能引领交互革命</div>
        <div>1 + 2 + N 解决方案全面升级</div>
      </div>
      <div class="flex-box">
        <div class="flex-box-one">
          <div class="title text-aling-center">1 智能主机</div>
          <div class="img-box">
            <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/znzj.svg" alt="">
          </div>
          <div class="sub-title text-aling-center">计算中枢</div>
        </div>
        <div class="add-box text-aling-center">+</div>
        <div class="flex-box-two">
          <div class="title text-aling-center">2 核心方案</div>
          <div class="img-box">
            <div class="zn-box">
              <div class="znzk flex-al-center">
                <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/znzk.png" alt="">
                <span>中控家族</span>
              </div>
              <div class="znsh flex-al-center">
                <img src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/znzkapp@pc.svg" alt="">
                <span>智慧生活 App</span>
              </div>
            </div>
          </div>
          <div class="sub-title tit-w text-aling-center flex-sub-box">
            <span>2 种交互方式</span>
          </div>
        </div>
        <div class="add-box text-aling-center">+</div>
        <div class="flex-box-three">
          <div class="title text-aling-center">N 子系统</div>
          <div class="img-box system-list flex-al-center">
            <div class="icon-box" v-for="(item,index) in imgBox" :key="index">
              <div class="icon" >
                <img :src="item.img" alt="">
              </div>
              <span>{{item.sapnTitle}}</span>
            </div>
          </div>
          <div class="sub-title tit-w text-aling-center">鸿蒙智联生态 </div>
        </div>
      </div>
      <div class="gap"></div>
      <div class="common-title-h3 text-aling-center tit-gray-1">1 个主机</div>
      <div class="common-title-h2 text-aling-center">AI、互联双中枢，全屋总指挥</div>
      <div class="common-title-h5 text-aling-center">
          搭载 HarmonyOS AI 引擎，让家拥有集学习、计算、决策、控制于一体的智慧大脑。针对<br/>
          空气、阳光、水等家居条件进行动态预判，照顾你生活起居的各处细节。
      </div>
      <div class="ai-vedio">
        <video autoplay loop src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/media/huawei-whole-home-pre-installed-solution-ai-hub.mp4"></video>
      </div>
      <div class="gap"></div>
      <div class="common-title-h3 text-aling-center">智能主机，面向前装 > 150 m2 大户型</div>
      <div class="video-box">
        <video class="zvideo" autoplay loop src="@/assets/video/2.mp4"></video>
        <div class="common-title-h5">
          <p>可连接 384 个智能化设备，大户型覆盖无忧</p>
          <p>质感设计，简约精美。<span class="tit-gray-2 font-weight-normal ">采用高级铝合金一体化冲压无缝成型，阳极氧化工艺的表面处理技术。</span></p>
          <p>小体积，大能量。
            <span class="tit-gray-2 font-weight-normal ">智能主机内置多模块设计，<br/>
            功能高集成，模块可拓展。</span>
          </p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="common-title-h3 text-aling-center">智能主机 SE，面向前装 &lt; 150 m2 中小户型</div>
      <div class="video-box">
        <video class="zvideo" autoplay loop src="@/assets/video/3.mp4"></video>
        <div class="common-title-h5">
          <p>可连接 384 个智能化设备，大户型覆盖无忧</p>
          <p>质感设计，简约精美。<span class="tit-gray-2 font-weight-normal ">采用高级铝合金一体化冲压无缝成型，阳极氧化工艺的表面处理技术。</span></p>
          <p>小体积，大能量。
            <span class="tit-gray-2 font-weight-normal ">智能主机内置多模块设计，<br/>
            功能高集成，模块可拓展。</span>
          </p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="common-title-h3 text-aling-center">智能主机 EZ，面向后装全户型</div>
      <div class="video-box">
        <div class="zvideo">
          <img src="@/assets/img/pc.webp" alt="">
        </div>
        <div class="common-title-h5">
          <p>可连接 384 个智能化设备，大户型覆盖无忧</p>
          <p>质感设计，简约精美。<span class="tit-gray-2 font-weight-normal ">采用高级铝合金一体化冲压无缝成型，阳极氧化工艺的表面处理技术。</span></p>
          <p>小体积，大能量。
            <span class="tit-gray-2 font-weight-normal ">智能主机内置多模块设计，<br/>
            功能高集成，模块可拓展。</span>
          </p>
        </div>
      </div>
      <div class="gap"></div>
      <div class="common-title-h3 text-aling-center tit-gray-1">全屋互联中枢</div>
      <div class="common-title-h2 text-aling-center">连接稳如泰山，网罗生活万象</div>
      <div class="gap"></div>
      <div class="planquan">PLC-IoT 技术，网随电通，有电即有网</div>
      <div class="boxImg">
        <img src="@/assets/img/huaweipc.webp" alt="">
      </div>
      <div class="card-box tit-w">
        <div class="card-list" v-for="(item,index) in cardList" :key="index">
          <div class="title nowrap">
            {{item.title}}
          </div>
          <div class="sub">{{item.sub}}</div>
        </div>
      </div>
      <div class="gap"></div>
    </div>
    <div class="planquan">全屋 Wi-Fi 6+，大平层和别墅，它都罩得住</div>
    <div style="background:black">
      <div class="banner">
        <div class="content-box">
          <div class="content-list" @click="banChange(item.id)" v-for="(item,index) in bannerList" :key="index" :class="banId == item.id ?'banactive':''">
            <div class="title">{{item.title}}</div>
            <div class="subs">{{item.conter}}</div> 
          </div>
        </div>
        <div class="conta">
            <img v-if="banId == 1" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module5/huawei-whole-home-pre-installed-solution-wifi-coverage@pc@2x.webp" alt="">
            <img v-if="banId == 2" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module5/huawei-whole-home-pre-installed-solution-wifi-seamless-roaming@pc@2x.webp" alt="">
            <img v-if="banId == 3" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module5/huawei-whole-home-pre-installed-solution-wifi-easy-to-install@pc@2x.webp" alt="">
            <img v-if="banId == 4" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module5/huawei-whole-home-pre-installed-solution-wifi-safety@pc@2x.webp" alt="">
        </div>
      </div>
    </div>
    <div class="gap"></div>
    <div class="ku">2 种交互方式</div>
    <div class="planquan">中控屏 + 智慧生活 App，集中管理 自然交互</div>
    <div class="subtit"> 全场景一致体验</div>
    <div style="background:black">
      <img style="width:100%" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module6/huawei-whole-home-pre-installed-solution-consistent-experience@2x.webp" alt="">
    </div>
    <div class="subtit">一空间一专属交互</div>
    <div class="swp">
      <el-carousel height="500px" autoplay :interval="3000" arrow="never">
      <el-carousel-item v-for="(item,index) in imgList" :key="index">
        <img :src="item.img" alt="">
      </el-carousel-item>
    </el-carousel>
    </div>
    <div class="gap"></div>
    <div class="ku">全屋十大子系统</div>
    <div class="planquan">惬意便捷体验，覆盖家的不同角落</div>
    <div>
      <img style="width:100%" src="https://s1.ax1x.com/2022/07/29/vPnOZd.jpg" alt="">
    </div>
    <div class="planquan">华为全屋智能，满足前后装所有需求</div>
    <div>
      <img style="width:100%" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/new/Huawei-wholehome-all-items-pc@2x.webp" alt="">
    </div>
    <div>
      <img style="width:100%" src="https://s1.ax1x.com/2022/07/29/vPuAds.jpg" alt="">
    </div>
    <div class="gap"></div>
    <div class="planquan">丰富鸿蒙智联生态4，奠定全屋子系统基石</div>
    <div>
      <img style="width:100%" src="https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/new/Huawei-wholehome-harmonyos-connect-pc@2x.webp" alt="">
    </div>
    <div class="gap"></div>
    <Btmx></Btmx>
  </div>
</template>

<script>
export default {
  components:{
  },
  mounted(){
    window.scrollTo(0,0)
  },
  data(){
    return{
      imgList:[
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module6/huawei-whole-home-pre-installed-solution-one-screen-for-a-room-1-pc@2x.webp',
        },{
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module6/huawei-whole-home-pre-installed-solution-one-screen-for-a-room-3-pc@2x.webp'
        },{
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module6/huawei-whole-home-pre-installed-solution-one-screen-for-a-room-5-pc@2x.webp'
        },{
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/module6/huawei-whole-home-pre-installed-solution-one-screen-for-a-room-4-pc@2x.webp'
        },
      ],
      imgBox:[
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/safeProtect.svg',
          sapnTitle:'安防'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/illumination.svg',
          sapnTitle:'照明'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/network.svg',
          sapnTitle:'网络控制'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/videoEntertainment.svg',
          sapnTitle:'影音娱乐'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/freshAir.svg',
          sapnTitle:'冷暖新风'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/sunshade.svg',
          sapnTitle:'遮阳'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/userOfWater.svg',
          sapnTitle:'用水'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/energyConsumption.svg',
          sapnTitle:'能耗'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/appliances.svg',
          sapnTitle:'家电'
        },
        {
          img:'https://consumer.huawei.com/content/dam/huawei-cbg-site/cn/mkt/wholehome/wholehome-solution/img/icon/appliances.svg',
          sapnTitle:'家具家私'
        },
      ],
      cardList:[
        {
          title:'2 亿 + 芯片服务国家电网',
          sub:'高成熟'
        },
        {
          title:'99.99% 通信成功率',
          sub:'高可靠'
        },
        {
          title:'2000 米传输100 万 + 小时不掉线',
          sub:'高稳定'
        },
        {
          title:'1 个电工就能搞定',
          sub:'易布署'
        },
      ],
      bannerList:[
        {
          id:1,
          title:'无死角覆盖',
          conter:'子母路由支持 1 拖 5，实现全屋无死角覆盖。'
        },{
          id:2,
          title:'无缝漫游',
          conter:'HarmonyOS Mesh+ 支持高速组网，全屋无缝漫游。'
        },{
          id:3,
          title:'即插即用',
          conter:'PoE 供电，子路由即插即用，简洁美观。'
        },{
          id:4,
          title:'安全防御',
          conter:'防攻击、防蹭网、Wi-Fi 热力图排除故障。'
        },
      ],
      banId:1
    }
  },
  methods:{
    banChange(i){
      this.banId = i
    }
  }
}
</script>

<style lang='scss' scoped>
*{
  box-sizing: border-box;
}

.planquan{
  text-align: center;
  font-size: 2.5vw;
  font-weight: 500;
  line-height: 1.25;
  background: black;
  color: white;
  padding-bottom: 30px;
}
.gap{
  height: 10.41667vw;
  background-color: black;
}
.ku{
  text-align: center;
  font-size: 2.5vw;
  font-weight: 500;
  line-height: 1.25;
  color: #7F7F7F;
  background-color: black;
  padding-bottom: 10px;
}
.text-aling-center{
  text-align: center;
}
.plan{
  padding-top: 70px;
  .planTop{
    width: 100%;
    position: relative;
    img{
      width: 100%;
    }
    .kv-text{
      position: absolute;
      top: 12.34375vw;
      left: 76.09375vw;
      text-align: center;
      width: 21.6145833vw;
      span{
        font-size: 24px;
        margin-bottom: 10px;
      }
    }
    .kv-sub{
      width: 27.64583vw;
      font-size: 0.625vw;
      text-align: right;
      line-height: 1.6;
      color: #4C4C4C;
      position: absolute;
      right: 1.04167vw;
      bottom: 2.08333vw;
      .nowrap{
            white-space: nowrap;
      }
    }
  }
  .planTwo{
    width: 100%;
    background: black;
    color: white;
    .card-box{
      display: flex;
      align-items: stretch;
      flex-wrap: wrap;
      width: 48.54167vw;
      margin: 0 auto;
      margin-top: 4.16667vw;
      .card-list{
        width: 23.22917vw;
        min-height: 8.64583vw;
        padding: 1.92708vw 2.60417vw 1.30208vw 2.60417vw;
        background: #1d1d1d;
        border-radius: 1.04167vw;
        margin-right: 1.04167vw;
        margin-top: 1.04167vw;
        .title {
          font-size: 1.66667vw;
          line-height: 1.25;
        }
        .sub{
            font-size: 1.14583vw;
            font-weight: 400;
            color: #7F7F7F;
            margin-top: 1.04167vw;
            line-height: 1.6;
        }
      }
    }
    .tit-w{
      color: white;
    }
    .boxImg{
      width: 62.8125vw;
      margin: 0 auto;
      img{
        width: 100%;
      }
    }
    .common-title-h3{
      font-size: 2.5vw;
      font-weight: 500;
      line-height: 1.25;
    }
    .sub-title{
      margin-bottom: 0.9375vw;
      margin-top: 9.89583vw;
    }
    .text-aling-center {
      text-align: center;
    }
    .video-box{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: row-reverse;
      // padding-top: 7.44792vw;
      margin-top: 10.21875vw;
      padding: 0 10vw;
      .zvideo{
        width: 43.48958vw;
        border-radius: 0.52083vw;
        img{
          margin-left: 16.927083vw;
          width: 19.947916vw;
          border-radius: 0.52083vw;
        }
      }
      .common-title-h5{
        // margin-right: 3.03125vw;
        width: 26.4583333vw;
        margin-top: 0vw;
        font-size: 1.14583vw;
        font-weight: bold;
        line-height: 1.6;
        .tit-gray-2{
          color: #C9C9C9;
        }
        .font-weight-normal {
          font-weight: normal;
        }
      }
    }
    .common-title-h3 {
      font-size: 2.5vw;
      font-weight: 500;
      line-height: 1.25;
    }
    .text-aling-center {
      text-align: center;
    }
    .ai-vedio{
      width: 100%;
      video{
        width: 100%;
      }
    }
    .common-title-h3{
      font-size: 2.5vw;
      font-weight: 500;
      line-height: 1.25;
    }
    .common-title-h2{
      font-size: 3.33333vw;
      font-weight: bold;
      line-height: 1.25;
      margin-top: 0.5208333vw;
    }
    .common-title-h5{
      width: 45vw;
      margin: 0 auto;
      margin-top: 6.25vw;
      margin-bottom: 3.958333vw;
      font-weight: normal;
    }
    .tit-gray-1{
          color: #7F7F7F;
    }
    .text-aling-center{
      text-align: center;
    }
    .pltwo_one{
      font-size: 4.16667vw;
      font-weight: bold;
      line-height: 1.25;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .flex-box{
      display: flex;
      flex-direction: row;
      margin-top: 8.33333vw;
      margin-left: 5.989583vw;
      align-items: flex-end;
      .flex-box-one{
        width: 11.92708vw;
        .title{
          font-size: 1.66667vw;
          font-weight: bold;
          line-height: 1.25;
          margin-bottom: 2.8645833vw;
          text-align: center;
        }
        .img-box{
          width: 11.932291vw;
          height: 12.239583vw;
          padding-top: 3.9791667vw;
          padding-left: 1.796875vw;
          background: #1d1d1d;
          border-radius: 1.04167vw;
          img{
            width: 9.171875vw;
          }
        }
        .sub-title{
          font-size: 1.66667vw;
          font-weight: normal;
          line-height: 1.25;
          margin-top: 2.86458333vw;
        }
      }
      .add-box{
        width: 5.15625vw;
        height: 12.23958vw;
        line-height: 12.23958vw;
        font-size: 2.5vw;
        color: #3281C1;
        margin-bottom: 5.20833vw;
      }
      .flex-box-two{
        width: 32.5vw;
        .title{
          font-size: 1.66667vw;
          font-weight: bold;
          line-height: 1.25;
          margin-bottom: 2.8645833vw;
          text-align: center;
        }
        .img-box{
          height: 12.239583vw;
          width: 100%;
          background: #1d1d1d;
          border-radius: 1.04167vw;
          .zn-box{
            padding-top: 1.666667vw;
            margin-left: 8.17708333vw;
            line-height: 1.25;
            .flex-al-center{
              display: flex;
              align-items: center;
              img{
                width: 10.46875vw;
              }
              span{
                margin-left: 1.9114583vw;
                font-size: 1.14583vw;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
            .flex-al-center{
              display: flex;
              align-items: center;
            }
            .znsh{
              margin-top: 1.78072917vw;
              img{
                width: 3.07292vw;
                margin-left: 4.36875vw;
              }
              span{
                margin-left: 4.942708vw;
              }
            }
          }
        }
        .sub-title{
              font-size: 1.66667vw;
    font-weight: normal;
    line-height: 1.25;
    margin-top: 2.86458333vw;
        }
      }
    }
  }
  .flex-box-three{
    width: 33.48958vw;
    .title{
      font-size: 1.66667vw;
      font-weight: bold;
      line-height: 1.25;
      margin-bottom: 2.8645833vw;
      text-align: center; 
    }
    .system-list{
      height: 12.239583vw;
      padding: 1.04167vw 2.08333vw;
      flex-wrap: wrap;
    }
    .img-box{
      width: 100%;
      background: #1d1d1d;
      border-radius: 1.04167vw;
      .icon-box{
        width: 5.86458vw;
        font-size: 0.83333vw;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-direction: column;
        margin-top: 0.41667vw;
        .icon{
          width: 2.5vw;
          height: 2.5vw;
          border-radius: 50%;
          border: 0.10417vw solid #FFFFFF;
          img{
            width: 1.66667vw;
            height: 1.66667vw;
            margin: 0.3125vw;
          }
        }
        sapn{
          line-height: 1.25;
          margin-top: 0.9375vw;
        }
      }
    }
    .flex-al-center{
      display: flex;
      align-items: center;
    }
    .sub-title{
      font-size: 1.66667vw;
      font-weight: normal;
      line-height: 1.25;
      margin-top: 2.86458333vw;
    }
  }
}
.banner{
  background: black;
  display: flex;
  align-items: end;
  flex-direction: row;
  width: 78.125vw;
  margin: 0 auto;
  padding-top: 3.95833vw;
  position: relative;
  .content-box{
    width: 27.479167vw;
      .content-list{
        width: 100%;
        height: 6.97917vw;
        padding-top: 0.885416vw;
        padding-left: 0.729166vw;
        background: #1D1D1D;
        border-radius: 1.04167vw;
        margin-bottom: 0.989583vw;
        opacity: 1;
        cursor: pointer;
        color: #7B7B7B;
        line-height: 1.6;
          .title{
            padding-top: 0;
            font-size: 1.66667vw;
            line-height: 1.25;
          }
          .subs{
            font-size: 1.14583vw;
            font-weight: 400;
            line-height: 1.6;
            margin-top: 0.83333vw;
            overflow: hidden;
            white-space: nowrap;
          }
        }
        .content-list:hover{
          color: #fff;
          background: #4C4C4C;
        }
  }
  .conta{
    width: 43.75vw;
    margin-left: 3.125vw;
    border-radius: 15px;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
}
.banactive{
  color: #fff !important;
  background: #4C4C4C !important;
}
.subtit{
  padding-bottom: 2.8125vw;
  padding-top: 4.765625vw;
  padding-left: 13.125vw;
  font-size: 2.5vw;
  font-weight: 500;
  line-height: 1.25;
  color:white;
  background-color: black;
}
 .swp{
  img{
    height: 100%;
    width: 100%;
  }
 } 
</style>